<html>
<script>
var local = true;
</script>

<style type="text/css">
<!--

#stabicounter {
	width: 300px;
	height: 200px;
	background: url(https://stabicounter.googlecode.com/svn/trunk/res/img/bg.jpg);
	color: #eee;
	position: relative;
	top: 100px;
}

#stabicounter, #stabicounter input {
	text-align: center;
	font-family: Calibri, Verdana, non-serif;
}

#controls {
	position: absolute;
	top: 114px;
	width: 100%;
	text-align: middle;

}

#controls input {
	background-color: #d95f2d;
	margin: 5px;
	border: 1px solid #882a10;
	font-size: 15px;
	
	-moz-border-radius:5px; /* Firefox */
	-webkit-border-radius:5px; /* Safari, Chrome */
	-khtml-border-radius:5px; /* Konqueror */
	border-radius:5px; /* CSS3 */
	
	-webkit-box-shadow: 1px 1px 2px #882a10;
	-moz-box-shadow: 1px 1px 2px #882a10;
	box-shadow: 1px 1px 2px #882a10;
}

#round {
 position: absolute;
 top: 65px;
 width: 100%;
 text-align: center;
 font-size: 30px;
}

#time {
 position: absolute;
 top: 0px;
 width: 100%;
 text-align: center;
 font-size: 75px;
}

#copyright {
	position: absolute;
	top: 170px;
	width: 100%;
	text-align: center;
	font-size: 15px;
}

-->
</style>

<script>

function frmZahl(zahl, l, f) 
{ 
var tmp = zahl + ''; 
if(tmp.length > l) l = tmp.length; 
if(typeof f == 'undefined') f = ' '; 
while(tmp.length < l) 
tmp = f + tmp; 
return tmp; 
}

function StabiCounter(rounds, duration1, duration2) {

	this.rounds = rounds;
	this.duration1 = duration1;
	this.duration2 = duration2;
	this.timer = new Date();

	
	if(!local) {
		var startSound = gapi.hangout.av.effects.createAudioResource(
			'https://stabicounter.googlecode.com/svn/trunk/res/sounds/start%20beep.wav').createSound();
		var roundSound = gapi.hangout.av.effects.createAudioResource(
			'https://stabicounter.googlecode.com/svn/trunk/res/sounds/round%20bell.wav').createSound();
		 var finishedSound = gapi.hangout.av.effects.createAudioResource(
			'https://stabicounter.googlecode.com/svn/trunk/res/sounds/finished%20tada.wav').createSound();
		
/*		roundSound.onLoad.add( function(event) {
		if ( !event.isLoaded ) {
			alert("Could not load your sound.");
			roundSound.dispose();
		} else {
			roundSound.play({loop: false, global:false});
			alert("played roundsound");
		}
		});*/
	}
	
	this.stoporreset = function() {
	
		this.starttime = this.timer.getTime();
		this.activeRound = 1;
		this.numRounds1 = 0;
		this.numRounds2 = 0;
		this.running = 0;
		this.minutes = 0;
		this.seconds = 0;
		
		this.updateGui();
		if(this.actVersion!=0) {
			this.commit();
		}
	}
	
	this.startorpause = function() {
		var now = new Date;

		if(this.running == 1) {
			this.running = 0;

			this.updateGui();
			} else {
			this.starttime = now.getTime() - (this.minutes*60000 + this.seconds*1000);
			this.running = 1;
			
			if(this.numRounds1==0) {
				this.numRounds1++;
			}
			this.tick();
		}

		this.commit();
	}
	

	this.tick = function() {
		if(this.running == 0) return;
		
		var now = new Date;

		if(now.getTime() > (this.starttime + duration1*1000*this.numRounds1 + this.duration2*1000*this.numRounds2)) {
			if(this.activeRound == 1) {
			this.numRounds2++;
				this.activeRound = 2;
			} else {
				this.numRounds1++;
				this.activeRound = 1;	
			}
			
			if(this.numRounds1 <= this.rounds) {
				//roundSound.play({loop: false, global:true});
			}
		}

		this.minutes = Math.floor((now-this.starttime)/60000);
		this.seconds = Math.floor((now-this.starttime) / 1000 - (this.minutes * 60));
		
		// update clock
		this.updateGui();

		
		
		if(this.numRounds1 <= this.rounds) {
		window.setTimeout("stabiCounter.tick()", 100);
		} else {
			//finishedSound.play({loop: false, global:true});
		}
		
	}
	
	this.updateGui= function() {
		
		var markIntenseRound1 = "";
		var markIntenseRound2 = "";
		if(this.activeRound == 2) {
			markIntenseRound1 = "<span style='color:#1698c8'>";
			markIntenseRound2 = "</span>";
		}
		
		document.getElementById('round').innerHTML = markIntenseRound1+"Runde " + this.numRounds1+markIntenseRound2;
		document.getElementById('time').innerHTML = markIntenseRound1+String(frmZahl(this.minutes,2,'0')) + ":" + String(frmZahl(this.seconds,2,'0'))+markIntenseRound2;
		
		if(this.running == true) {
			document.getElementById('buttonStartOrPause').value = 'Pause';
			document.getElementById('buttonStopOrReset').value = 'Stop';
		} else {
			document.getElementById('buttonStartOrPause').value = 'Start';
			document.getElementById('buttonStopOrReset').value = 'Reset';
		}
		
	}

	
	// stuff for syncing with hangout session
	this.actVersion = 0;
	this.update = function() {
		
		if(local) return;
		
		this.state = gapi.hangout.data.getState();
		
		if(parseInt(this.state.version) > this.actVersion) {
			this.actVersion = parseInt(this.state.version);
			this.running = parseInt(this.state.running);
			this.minutes = parseInt(this.state.minutes);
			this.seconds = parseInt(this.state.seconds);
			this.numRounds1 = parseInt(this.state.numRounds1);
			this.numRounds2 = parseInt(this.state.numRounds2);
			this.activeRound = parseInt(this.state.activeRound);

			var now = new Date;
			this.updateGui();
		}
	}
	
	this.updateLocal = function(state) {
		if(parseInt(state.version) >= this.actVersion) {
			this.actVersion = parseInt(state.version);
			this.running = parseInt(state.running);
			this.minutes = parseInt(state.minutes);
			this.seconds = parseInt(state.seconds);
			this.numRounds1 = parseInt(state.numRounds1);
			this.numRounds2 = parseInt(state.numRounds2);
			this.activeRound = parseInt(state.activeRound);

			//alert("update local");
			var now = new Date;
			this.updateGui();
		}
	}
	
	this.commit = function(clockState) {

		this.actVersion++;

		if(local)  {
			this.updateLocal({version: String(this.actVersion),
				running: String(this.running),
				minutes: String(this.minutes), seconds: String(this.seconds),
				numRounds1: String(this.numRounds1), numRounds2: String(this.numRounds2),
				activeRound: String(this.activeRound)});
		} else {
			gapi.hangout.data.submitDelta( {version: String(this.actVersion),
				running: String(this.running),
				minutes: String(this.minutes), seconds: String(this.seconds),
				numRounds1: String(this.numRounds1), numRounds2: String(this.numRounds2),
				activeRound: String(this.activeRound)} );
		}
	}

}

</script>
<body>


<div id="stabicounter">
<div id="clock">
	<div id="time"></div>
	<div id="round"></div>
</div>
<div id="controls">
	<input class="button" type="button" value="start" id="buttonStartOrPause" onClick="stabiCounter.startorpause()"/>
	<input class="button" type="button" value="reset" id="buttonStopOrReset" onClick="stabiCounter.stoporreset()"/>
</div>
<div id="copyright">StabiCounter by Johann Gehrisch</div>
</div>
<script>

var stabiCounter; 


function init() {
  // When API is ready...                                                         
  gapi.hangout.onApiReady.add(
      function(eventObj) {
        if (eventObj.isApiReady) {
				document.getElementById('stabicounter').style.visibility = 'visible';
				stabiCounter = new StabiCounter(30,45,15);
				gapi.hangout.data.onStateChanged.add( function(event) { stabiCounter.update(); } );

				stabiCounter.stoporreset();

        }
      });
}

if(local) {
	document.getElementById('stabicounter').style.visibility = 'visible';
	stabiCounter = new StabiCounter(30,45,15);
	stabiCounter.stoporreset();
} else {
	// Wait for gadget to load.                                                       
	gadgets.util.registerOnLoadHandler(init);
}
</script>
</body>